<template>
	<a-sub-menu :key="menuInfo.url" v-bind="$props" v-on="$listeners">
		<span slot="title">
			<a-icon class="menu-icon" v-if="menuInfo.icon" :type="menuInfo.icon" />
		  <span>{{ menuInfo.name }}</span>
		</span>
		<template v-for="item in menuInfo.child">
		  <a-menu-item class="subP" v-if="!item.child" :key="item.url">
			<span>{{ item.name }}</span>
		  </a-menu-item>
		  <sub-menu v-else :key="item.url" :menu-info="item" />
		</template>
	  </a-sub-menu>
</template>

<script>
import { Menu } from 'ant-design-vue';
export default {
	name: 'subMenu',
	props: {
		...Menu.SubMenu.props,
		menuInfo: {
		  type: Object,
		  default: () => ({}),
		},
	},
	data() {
		return {};
	},
	methods: {
		handleMenuClick() {

		},
	}
}
</script>

<style>
.ant-menu-item .anticon, .ant-menu-submenu-title .anticon{
	margin-right: 18px;
}
.subP{
	padding-left: 70px !important;
}
</style>
